<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/unified.css" />
		<link rel="stylesheet" type="text/css" href="css/evaluation.css?v=1">
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/Fn.js"></script>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav head00c694">
			<!--<a class="mui-action-back iconfont icon-more_unfold mui-icon mui-pull-left"></a>-->
			<h1 class="mui-title">评价订单</h1>
			<span class="mui-pull-right " id="yesevaluation">确认</span>
		</header>
		<div class="content" id="evalustionid">
			<div class="Oorder">
				<div class="productLi">
					<img src="http://p2816srbo.bkt.clouddn.com/FiXxxMYJlA3aSZj59T3kD-tpr6nv" class="pimgS" />

					<div class="pname">题测试标题测试标题测试标题题测试标题测试标测试标题测试标题测试标</div>
				</div>
				<textarea rows="4" cols="20" class="Otextarea" placeholder="点击填写评价"></textarea>
				<div class="mui-content-padded">
					<div class="mui-inline">物流评分</div>
					<div class="icons mui-inline" style="margin-left: 6px;">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>

				</div>
				<div class="mui-content-padded">
					<div class="mui-inline">商品评分</div>
					<div class="icons mui-inline" style="margin-left: 6px;">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>

				</div>
			</div>
			<!--<div class="Oorder">
				<div class="productLi">
					<img src="http://p2816srbo.bkt.clouddn.com/FiXxxMYJlA3aSZj59T3kD-tpr6nv" class="pimgS" />

					<div class="pname">题测试标题测试标题测试标题题测试标题测试标测试标题测试标题测试标</div>
				</div>
				<textarea rows="4" cols="20" class="Otextarea" placeholder="点击填写评价"></textarea>
				<div class="mui-content-padded">
					<div class="mui-inline">物流评分</div>
					<div class="icons mui-inline" style="margin-left: 6px;">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>

				</div>
				<div class="mui-content-padded">
					<div class="mui-inline">商品评分</div>
					<div class="icons mui-inline" style="margin-left: 6px;">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>

				</div>
			</div>-->
		</div>

		<script type="text/javascript">
			
			//应用评分
			
			var commodity = new Array();
			var orderNumber = GetQueryString("orderNumber")
			$("#yesevaluation").on("tap",function(){
//				点击确认评价
				for (var i = 0; i < $(".Otextarea").length; i++) {
					// 判断是否为文本框
					if ($(".Otextarea").eq(i).val() == "") {
						mui.toast("请将信息填写完成");
						return false;
					}
				}
				
				
				$.each($(".Oorder"), function(idx,obj) {
					var thisobj = $(".Oorder").eq(idx);
					commodity.push({
						'commodityNumber':thisobj.attr("data-CNum"),
						'commodityStar':thisobj.find(".mui-icon-star-filled").length,
						'evaluateText':thisobj.find(".Otextarea").val()
					})
				})
				MuiAjaxFn("client/orderinfo/evaluate/newevaluate", "{'commodity':"+JSON.stringify(commodity)+",'evaluate':{'orderNumber':'"+orderNumber+"'}}", function(data) {
					if(data.htmlState.status==200){
						mui.toast("评价成功");
						$("#yesevaluation").unbind();
						$("#yesevaluation").html("返回");
						$("#yesevaluation").on("tap",function(){
							 window.history.go(-1);
						})
					}else{
						mui.toast(data.htmlState.message);
					}
				})
				
			})
			
			MuiAjaxFn('client/orderinfo/selectbynumber', {'orderNumber':orderNumber}, function(data) {
				if(data.dataResultList.length!=0){
					console.log(JSON.stringify(data))
					var listJson = '';
					$.each(data.dataResultList[0].orderCommodityVo, function(idx,obj) {
						var ResultObj = obj.dataResultObj;
						listJson += '<div class="Oorder" data-oNum="'+obj.orderNumber+'" data-CNum="'+ResultObj.commodityNumber+'">'+
									 '<div class="productLi">'+
									 '	<img src="'+IMGUrl +''+ResultObj.mainPhoto+'" class="pimgS" />'+
									  '	<div class="pname">'+ResultObj.title+'</div>'+
									 '</div>'+
									 '<textarea rows="4" cols="20" class="Otextarea" placeholder="点击填写评价"></textarea>'+
									 '<div class="mui-content-padded">'+
									 '	<div class="mui-inline">商品评分</div>'+
									 '	<div class="icons mui-inline" style="margin-left: 6px;">'+
									 '		<i data-index="1" class="mui-icon mui-icon-star"></i>'+
									 '		<i data-index="2" class="mui-icon mui-icon-star"></i>'+
									 '		<i data-index="3" class="mui-icon mui-icon-star"></i>'+
									 '		<i data-index="4" class="mui-icon mui-icon-star"></i>'+
									 '		<i data-index="5" class="mui-icon mui-icon-star"></i>'+
									 '	</div>'+
									 '</div>'+
//									 '<div class="mui-content-padded">'+
//									 '	<div class="mui-inline">商品评分</div>'+
//									 '	<div class="icons mui-inline" style="margin-left: 6px;">'+
//									 '		<i data-index="1" class="mui-icon mui-icon-star"></i>'+
//									 '		<i data-index="2" class="mui-icon mui-icon-star"></i>'+
//									 '		<i data-index="3" class="mui-icon mui-icon-star"></i>'+
//									 '		<i data-index="4" class="mui-icon mui-icon-star"></i>'+
//									 '		<i data-index="5" class="mui-icon mui-icon-star"></i>'+
//									 '	</div>'+
//					
									 '</div>'+
								 '</div>';
						
					});
					$("#evalustionid").html(listJson);
					Stars5Fn();
				}
			})
			
			
			function Stars5Fn(){
				mui('.icons').on('tap', 'i', function() {
					var index = parseInt(this.getAttribute("data-index"));
					var parent = this.parentNode;
					var children = parent.children;
					if(this.classList.contains("mui-icon-star")) {
						for(var i = 0; i < index; i++) {
							children[i].classList.remove('mui-icon-star');
							children[i].classList.add('mui-icon-star-filled');
						}
					} else {
						for(var i = index; i < 5; i++) {
							children[i].classList.add('mui-icon-star')
							children[i].classList.remove('mui-icon-star-filled')
						}
					}
					starIndex = index;
				});
			}
			
			
		</script>
	</body>

</html>